<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
    <style>
      #login-form {
        margin-top: 50px;
      }
      
      .mui-content-padded {
        margin-top: 25px;
      }
      
      .mui-btn {
        padding: 5px;
      }
    </style>
  </head>

  <body>
    <script src="../js/mui.min.js"></script>
    <script type="text/javascript">
      mui.init()
    </script>
    <div class="mui-content">
      <form id='login-form' class="mui-input-group">
        <div class="mui-input-row">
          <label>原密码</label>
          <input id='oldPassword' type="password" class="mui-input-clear mui-input" placeholder="请输入原密码">
        </div>
        <div class="mui-input-row">
          <label>新密码</label>
          <input id='newPassword' type="password" class="mui-input-clear mui-input" placeholder="请输入新密码">
        </div>
        <div class="mui-input-row">
          <label>确认密码</label>
          <input id='surePassword' type="password" class="mui-input-clear mui-input" placeholder="请确认新密码">
        </div>
      </form>
      <div class="mui-content-padded">
        <button id='login' class="mui-btn mui-btn-block mui-btn-primary">提交</button>
      </div>
    </div>
  </body>
  <script src="../config.js"></script>
  <script>
    mui.plusReady(function() {
      bindEvent()
    })
    var form = {
        oldPassword: '',
        newPassword: '',
        surePassword: ''
      },
      isSubmit = true

    function getFormValue() {
      form.oldPassword = mui('#oldPassword')[0].value;
      form.newPassword = mui('#newPassword')[0].value;
      form.surePassword = mui('#surePassword')[0].value;
    }

    function validateInput(val, rules, message) {
      if(rules.required === true && val === '') {
        plus.nativeUI.toast(message);
        return false;
      }
      return true;
    }

    function bindEvent() {
      document.querySelector("#login").addEventListener('tap', function() {
        mui('#oldPassword')[0].blur();
        mui('#newPassword')[0].blur();
        mui('#surePassword')[0].blur();
        getFormValue()
        var validate1 = validateInput(form.oldPassword, {
          required: true
        }, '请输入原密码!');
        var validate2 = validateInput(form.newPassword, {
          required: true
        }, '请输入新密码!');
        var validate3 = validateInput(form.surePassword, {
          required: true
        }, '请确认新密码!');
        if(validate1 && validate2 && validate3) {
          loginIn();
        }
      })
    }

    function loginIn() {
      if(form.newPassword !== form.surePassword) {
        mui.toast('两次密码不相等，请确认')
      } else {
        if(!isSubmit) {
          return;
        }
        mui('#login').button('loading');
        isSubmit = true;
        config.ajax({
          url: '/account/updatePersonalAccount',
          data: {
            oldPassword: form.oldPassword,
            password: form.newPassword
          },
          success: function(res) {
            if(res.result === 1) {
              mui.toast('修改成功')
              modifySuccess()
            } else {
              mui.toast(res.errormsg)
            }
            isSubmit = false;
            mui('#login').button('reset');
          }
        })
      }
    }

    function modifySuccess() {
      var allPage = plus.webview.all()
      var nowPage = plus.webview.getWebviewById('index')
      for(var i = 0; i < allPage.length; i++) {
        if(allPage[i].getURL() !== nowPage.getURL()) {
          plus.webview.close(allPage[i]);
        }
      }
    }
  </script>

</html>